<template>
  <div class="container">
    <div class="view">
      <!-- tab组件 -->
      <el-row class="first">
        <el-col :span="6">
          <span v-if="formData.questionType == 1">【题型】:单选</span>
          <span v-else-if="formData.questionType == 2">【题型】:多选</span>
          <span v-else-if="formData.questionType == 3">【题型】:简答</span>
        </el-col>
        <el-col :span="6">
          <span>【编号】:{{formData.id}}</span>
        </el-col>
        <el-col :span="6">
          <span v-if="formData.difficulty == 1">【难度】:简单</span>
          <span v-else-if="formData.difficulty == 2">【难度】:一般</span>
          <span v-else-if="formData.difficulty == 3">【难度】:困难</span>
        </el-col>
        <el-col :span="6">
          <span>【标签】:{{formData.tags}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <span>【学科】:{{formData.subjectName}}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】:{{formData.directoryName}}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】:{{formData.direction}}</span>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col>
          <div class="question">
            【题干】：<div
              v-html="formData.question"
              style="color:blue"
            ></div>
            <div
              class="radio"
              v-if="formData.questionType==1"
            >
              <div class="info">单选题 选项：（以下选中的选项为正确答案）</div>
              <el-radio
                class="radio"
                v-for="item in formData.options"
                :key="item.id"
                :value="1"
                :label="item.isRight"
                onclick="return false"
                size="medium"
              > {{item.code}} : {{item.title}} </el-radio>
            </div>
            <div
              class="checkbox"
              v-else-if="formData.questionType==2"
            >
              <el-checkbox
                v-for="item in formData.options"
                :key="item.id"
                onclick="return false"
                :checked="item.isRight === 1"
              > {{item.code}} : {{item.title}} </el-checkbox>
            </div>
            <div
              class="jianda"
              v-else
            >
            </div>
          </div>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <div style="margin-top: 20px">
          <div class="clearfix">
            【参考答案】：
            <el-button
              type="danger"
              @click="hVideo"
            >视频答案预览</el-button>
          </div>
          <video
            v-if="isVideo"
            width="300px"
            height="200px"
            style="float: left"
            controls
            autoplay
            :src="formData.videoURL"
          ></video>
        </div>
      </el-row>
      <hr />
      <el-row>
        <div style="margin-top: 20px">
          【答案解析】：<span
            style="display: inline-block"
            v-html="formData.answer"
          ></span>
        </div>
      </el-row>
      <hr />
      <el-row>
        <div style="margin-top: 20px">
          <span>【题目备注】:{{formData.remarks}}</span>
        </div>
      </el-row>
      <el-row>
        <div class="btn">
          <el-button
            type="primary"
            @click="hClose"
          >关闭 </el-button>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  props: {
    questionId: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      formData: {}, // 题目详情
      isVideo: false,
      radioOptions: [ // 单选
        // 单选选项
        {
          code: 'A',
          title: '选项A',
          img: '',
          isRight: false
        },
        {
          code: 'B',
          title: '选项B',
          img: '',
          isRight: false
        },
        {
          code: 'C',
          title: '选项C',
          img: '',
          isRight: false
        },
        {
          code: 'D',
          title: '选项D',
          img: '',
          isRight: false
        }
      ],
      checkboxOptions: [ // 多选
        // 多选选项
        {
          code: 'A',
          title: '选项A',
          img: '',
          isRight: false
        },
        {
          code: 'B',
          title: '选项B',
          img: '',
          isRight: false
        },
        {
          code: 'C',
          title: '选项C',
          img: '',
          isRight: false
        },
        {
          code: 'D',
          title: '选项D',
          img: '',
          isRight: false
        }
      ]
    }
  },
  created () {
    console.log(this.questionId)
    this.getQuestionDetail()
  },
  methods: {
    async getQuestionDetail () {
      try {
        const res = await detail({ id: this.questionId })
        console.log(res)
        this.formData = res.data
      } catch (err) {
        console.log(err)
      }
    },
    hVideo () {
      this.isVideo = true
    },
    hClose () { // 关闭弹层
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.container .el-dialog__header {
  height: 50px;
}
.clearfix:after {
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.container .first {
  margin-bottom: 20px;
}
.el-radio {
  display: block;
  margin-top: 10px;
}
.el-checkbox {
  display: block;
  margin-top: 10px;
}
.btn {
  margin-top: 20px;
  text-align: center;
}
</style>
